<template>
	<el-container class="indexPage">
		<el-header style="display: flex;">
			<div id="logo" v-for="(item, index) in systemsetting" v-if="item.dkey == 'logo'">{{ item.dvalue }}</div>
			<div><el-button @click="isCollapse = !isCollapse" icon="el-icon-s-fold" size="small"></el-button></div>
			<div style="flex:1;">
				<el-menu style="float: right;" mode="horizontal" class="head-menu">
					<el-submenu index="1">
						<template slot="title">
							<span>更换主题</span>
						</template>
						<el-menu-item title="blue" index="1-1" @click="changeTheme('blue')">
							<div style=" height: 100%;" :style="{ background: getSkinColor.blue }"></div>
						</el-menu-item>
						<el-menu-item title="green" index="1-2" @click="changeTheme('green')">
							<div style=" height: 100%;" :style="{ background: getSkinColor.green }"></div>
						</el-menu-item>
						<el-menu-item title="black" index="1-3" @click="changeTheme('black')">
							<div style=" height: 100%;" :style="{ background: getSkinColor.black }"></div>
						</el-menu-item>
						<el-menu-item title="grey" index="1-4" @click="changeTheme('grey')">
							<div style=" height: 100%;" :style="{ background: getSkinColor.grey }"></div>
						</el-menu-item>
						<el-menu-item title="darkblue" index="1-5" @click="changeTheme('darkblue')">
							<div style=" height: 100%;" :style="{ background: getSkinColor.darkblue }"></div>
						</el-menu-item>
						<el-menu-item title="purple" index="1-5" @click="changeTheme('purple')">
							<div style=" height: 100%;" :style="{ background: getSkinColor.purple }"></div>
						</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title">
							<img :src="userInfo.head" class="headImg" v-if="userInfo.head" />
							<img class="headImg" src="~assets/img/male.jpg" v-else />
							<span>{{ userInfo.name }}</span>
						</template>
						<el-menu-item index="2-1" @click="cleanCaches()">清除缓存</el-menu-item>
						<el-menu-item index="2-2" @click="logout()">退出登录</el-menu-item>
					</el-submenu>
				</el-menu>
			</div>
		</el-header>
		<el-container>
			<el-aside><menu-tree :items="menus" :isCollapse="isCollapse" @click="clickMenu" :isOpen="isOpen"></menu-tree></el-aside>
			<el-container>
				<el-main style="display: flex;flex-direction: column;">
					<tab :items="tabs" :id="currentTabId" :tabsLimit="tabsLimit" ref="tab" @removeTab="removeTab" @tabChange="tabChange" @refresh="refresh"></tab>
					<div style="flex: 1;position: relative;">
						<transition name="el-zoom-in-center"><router-view v-if="frameShow"></router-view></transition>
					</div>
				</el-main>
			</el-container>
		</el-container>
		<el-footer v-for="(item, index) in systemsetting" v-if="item.dkey == 'footer'">{{ item.dvalue }}</el-footer>
	</el-container>
</template>

<script>
import Vue from 'vue';
import caches from 'util/caches.js';
import api from 'api/index.js';
import utils from 'util/utils.js';
import { router, asyncRouterMap } from 'router';
import { mapGetters } from 'vuex';

import menuTree from 'components/menu/menuTree.vue';
import tab from 'components/tab/tab.vue';

export default {
	name: 'index',
	components: {
		menuTree,
		tab
	},
	data() {
		return {
			menus: [],
			isCollapse: false,
			isOpen: true,
			userInfo: {},
			systemsetting: [],
			currentTabId: 'main',
			tabs: [],
			tabsLimit: 20,
			frameShow: true
		};
	},
	computed: {
		...mapGetters(['getMenus', 'getAddRoutes', 'getSkinColor'])
	},
	methods: {
		//点击菜单
		clickMenu(option) {
			if (!this.$refs.tab.addTab(option)) {
				utils.msg.warning('最多打开' + this.tabsLimit + '个！');
			}
			caches.tabs.set(this.$refs.tab.getTabs());
		},
		//tab切换的回调
		tabChange(id) {
			caches.currentTabId.set(id);
			this.$router.replace('/' + id);
		},
		//删除tab回调
		removeTab(id) {
			caches.tabs.set(this.$refs.tab.getTabs());
		},
		//刷新tab
		refresh() {
			this.frameShow = !this.frameShow;
			setTimeout(() => {
				this.frameShow = !this.frameShow;
			}, 300);
		},
		getInfo() {
			api.getInfo(null, response => {
				//权限信息过滤
				//菜单
				let menus = new Array();
				//权限编码
				let codes = new Array();
				let user = response.data.userVo;
				let permissions = response.data.permissions;
				let roleChildren = response.data.roleChildren;
				let departmentChildren = response.data.departmentChildren;
				if (user) {
					caches.user.set(user);
					this.userInfo = user;
				}
				if (roleChildren) {
					caches.roleChildren.set(roleChildren);
				}
				if (departmentChildren) {
					caches.departmentChildren.set(departmentChildren);
				}
				if (permissions) {
					//外部网址匹配
					let outsideWeb = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/;
					for (let v of permissions) {
						if (v.type == 1 || v.type == 2) {
							if (outsideWeb.test(v.url)) {
								v.urlType = 2;
								v.pathUrl = v.url;
								v.url = v.url.slice(v.url.lastIndexOf('/') + 1);
							} else {
								v.urlType = 1;
							}
							menus.push(v);
						}
						if (v.type == 3 || v.type == 2) {
							codes.push(v.code);
						}
					}
					caches.menus.set(menus);
					caches.codes.set(codes);
					//初始化动态路由
					this.$store.dispatch('initRouter', menus).then(() => {
						this.$router.addRoutes(this.getAddRoutes);
					});
					//获取动态菜单
					this.menus = this.getMenus;
				}
			});
		},
		//更换主题
		changeTheme(val) {
			caches.skin.set(val);
			this.$store.dispatch('setSkin', val);
		},
		//清除缓存
		cleanCaches() {
			this.$confirm('将清除系统缓存, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					utils.msg.success('已清除缓存', 500, () => {
						caches.cleanCaches();
						window.location.reload();
					});
				})
				.catch(() => {});
		},
		logout() {
			this.$confirm('将退出登录, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					api.logout(null, response => {
						utils.msg.success(response.msg, 500, () => {
							caches.cleanAll();
							this.$router.replace('/login');
						});
					});
				})
				.catch(() => {});
		},
		//获取系统配置
		getSystemsetting() {
			api.getSystemsetting(null, response => {
				this.systemsetting = response.data;
				caches.setting.set(this.systemsetting);
			});
		},
		init() {
			//有缓存
			if (!caches.menus.get()) {
				this.getInfo();
			} else {
				//获取动态菜单
				this.menus = this.getMenus;
				this.userInfo = caches.user.get();
			}
			if (!caches.setting.get()) {
				this.getSystemsetting();
			} else {
				this.systemsetting = caches.setting.get();
			}
			this.tabs = caches.tabs.get() ? caches.tabs.get() : [{ id: 'main', name: '首页', url: 'main', closable: false }];
			this.skin = caches.skin.get() ? caches.skin.get() : 'blue';
			this.$store.dispatch('setSkin', this.skin);
			this.currentTabId = caches.currentTabId.get() != null ? caches.currentTabId.get() : 'main';
		}
	},
	mounted() {
		this.init();
		this.$router.replace('/main');
	}
};
</script>

<style lang="scss">
@import '~common/custom/css/common.scss';
@import '~common/custom/css/index.scss';
</style>
